<template>
    <div class="yx-input">
        <!-- <input type="text" v-model="title"> -->
        <!-- <input type="text" :value="title" @input="changeVal">
        <p>{{title}}</p> -->
        <input :type="type" :value="modelValue" :placeholder="placeholder" @input="$emit('update:modelValue',$event.target.value)" @blur="$emit('blur')">
        <!-- 提示 -->
        <span class="rules">
            <slot name="rules"></slot>
        </span>
        <!-- 图标 -->
         <span class="icon">
            <slot name="icon"></slot>
        </span>
    </div>
</template>
<script>
import {ref} from 'vue'
export default {
    props:{
        // modelValue是固定的名字
        modelValue:[String,Number],
        placeholder:[String],
        type:{
            type:String,
            default:'text'
        }
    },
    setup(props) {
        // const title = ref('123')
        // const changeVal = (e)=>{
        //     console.log(e);
        //     title.value = e.target.value

        // }
        // return {title,changeVal}
    }
}
</script>
<style lang="scss" scoped>
.yx-input{
    width:100%;
    height: 50px;
    display: flex;
    background: #f5f5f5;
    border-radius:6px;
    border: 1px solid transparent;
    align-items: center;
    margin-top: 10px;
    padding-right: 10px;
    input{
        border:none;
        background: transparent;
        padding: 0 20px;
        height: 70%;
        flex:1;
        min-width: 100px;

    }
      span{
        display: inline-flex;
        align-items: center;
      }
    .rules{
        font-size: 12px;
        color:#c00;
        margin-right: 10px;
    }
    .icon{
       color:#999; 
    }

}
</style>
